<template>
<!--

  我们通过ref定义的可响应式的数据，返回是一个RefImp对象
  但是我们这里却可以直接使用其字面量，原因在于vue3
  在解析的时候，会自动拿他的value属性
  而不用我们定义name.value拿到具体定义的值

-->
  <h1>{{name}},{{age}}</h1>
  <h1>{{job.type}},{{job.salary}}</h1>
  <button @click="sayHello">点我</button>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import {ref,reactive} from 'vue'

// 引入其他人写的方法
import savePoint from './hooks/usePoint'

export default {
  name: 'App',
  // vue3 中存在一个全新的配置项，叫做setup，你的数据，方法，生命周期钩子
  // 都需要写在这里
  setup(props) {
    
    // 数据
    // let name = "pop"
    // let age = 18

    //ref 函数和dom对象上的ref不是一个东西，ref函数可以将你的数据变成响应式的
    let name = ref('张三')
    // ref 返回的是 引用对象（引用实现的对象）
    let age =  ref(18)

    /**
     * ref可以定义数据类型，也可以定义对象
     * 的那是reactive只能用于定义对象，被定义后的返回的代理对象
     * 不需要使用.value来访问具体的值
     * 而是直接使用字面量就行，且这个代理的深层次的代理
     */
    let job = reactive(
      {type:'前端工程师',
      salary:'30K',
      // 深层次代理
      a:{b:{
        c:123 
      }}
      }
      )

      let hobby = reactive(['抽烟','喝酒','烫头'])

    // 方法
    function sayHello(){
      alert(`我叫${name},我${age}岁`)
    }

    /**
     * 1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
      2. 若返回一个渲染函数：则可以自定义渲染内容。（了解）</span>
     */

    function changeInfo(){
      // name="pipi"
      // age = 19 定义的局部变量，虽然已经修改成功了，但是无法被vue检测到
      // 所以我们需要ref函数
      name.value = 'pop'
    // 修改对象内的数据，可以在属性上直接修改
    /**
     * vue3对不同的类型的数据会做不同的代理
     * 对于基本数据用的是refimp，但是对于object类型是Proxy
     * 这是个window身上自带的数据，可以对对象进行代理。
     * 这个返回出来的代理对象的所有数据都可以直接修改
     */
      // job.value.type = "类型"
      // 更方便的访问
      job.type="123"
      // 相比vue2不支持索引，但是在vue3的reactive中，你使用索引也可以修改
      // 但是我们还是希望使用数组的方法更加规范一些
      hobby[0]="123"
      hobby.pop()
    }



    let point = savePoint()

    return {
      name,age,job,sayHello,changeInfo,point
    }

    // return ()=>{
    //   return h('h1','一个渲染函数')
    // }
    //他会替换页面的东西
    // return ()=>h('h1','一个渲染函数')
    
  }
}
</script>


